<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的html5 File测试 for pic2base64</title>
 
<script>
window.onload = function(){
	var can=document.getElementById("Canvas");
	var ctx=can.getContext("2d");
	var input = document.getElementById("demo_input");
	var img_area = document.getElementById("img_area");
	input.addEventListener( 'change',readFile,false );
	function readFile(){
	var file = this.files[0];
	//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
	if(!/image\/\w+/.test(file.type)){
	alert("请确保文件为图像类型");
	return false;
	}
	var reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = function(e){
		var img=new Image();
		img.src=this.result ;

		img.onload=function(){
			console.log(img)
		//console.log(this.result);
			 ctx.drawImage(img,0,0,can.width,can.height)
			 serverImg();
		}
	// result.innerHTML = '<img src="'+this.result+'" alt=""/>';
	// 	// document.getElementById("img").innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';
	}
	function serverImg(){
		var type="png";
		var imgData = can.toDataURL("image/png",0.7);
		imgData = imgData.replace("image/png",'image/octet-stream');
		var saveFile = function(data, filename){
		var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
		save_link.href = data;
		save_link.download = filename;
		var event = document.createEvent('MouseEvents');
		event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
		save_link.dispatchEvent(event);
		};

		// 下载后的问题名
		var filename = '二维码' + (new Date()).getTime() + '.' + type;
		// download
		saveFile(imgData,filename);
		}
	}
}
</script>
</head>
<body>
<input type="file" value="sdgsdg" id="demo_input" />
<p id="img_area"></p>
<div id="img"></div>
<canvas width=200 height=200 id="Canvas"></canvas>
</body>
</html>